<script setup>
// 其实组件也可以不用导入，element-ui 中默认帮你配置了 components 组件自动导入了
import PageContainer from "@/components/PageContainer.vue";
import ChannelEdit from "@/components/article/ChannelEdit.vue";

import { ref } from 'vue'
import {delArticleCategory, getArticleCategoryList} from "@/api/article.js";
import {Delete, Edit} from "@element-plus/icons-vue";

const channelList = ref([])
const loading = ref(false)
const dialog = ref(false)

const getChannelList = async () => {
	loading.value = true
	const res = await getArticleCategoryList()
	channelList.value = res.data.records
	loading.value = false
}
getChannelList()

const onEditChannel = (row) => {
	dialog.value.open(row)
}
const onRemoveChannel = (id) => {
	ElMessageBox.confirm('确定删除吗？', '温馨提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		delArticleCategory(id)
		ElMessage.success('删除成功')
		getChannelList()
	}).catch()
}
const onAddChannel = () => {
	dialog.value.open()
}
const onSuccess = () => {
	getChannelList()
}
</script>

<template>
	<page-container title="文章分类">
		<template #extra>
			<el-button type="primary" @click="onAddChannel">添加分类</el-button>
		</template>
		<!--表格-->
		<el-table v-loading :data="channelList" style="width: 100%">
			<el-table-column type="index" label="序号" width="100"></el-table-column>
			<el-table-column label="分类名称" prop="cateName"></el-table-column>
			<el-table-column label="分类别名" prop="cateAlias"></el-table-column>
			<el-table-column label="操作" width="100">
				<!--row：就是list中的每一项，index就是下标-->
				<template #default="{row, $index}">
					<el-button @click="onEditChannel(row)" :icon="Edit" type="primary" circle/>
					<el-button @click="onRemoveChannel(row.id)" :icon="Delete" type="danger" circle/>
				</template>
			</el-table-column>
			<!--自定义空表格样式-->
			<template #empty>
				<el-empty description="暂无文章分类"/>
			</template>
		</el-table>
		<!--弹窗-->
		<channel-edit ref="dialog" @success="onSuccess"></channel-edit>
	</page-container>
</template>

<style scoped lang="less">

</style>